<template>
	<view class="background">
		<view class="passenger-info">
			<view class="from-item">
				<text style="width: 130upx;">乘客姓名</text>
				<input v-model="name" placeholder="与乘客姓名一致" placeholder-class="pcs"/>
			</view>
			<view class="from-item">
				<text style="width: 130upx;">证件类型</text>
				<text style="margin-left: 10upx; font-weight: bold;">身份证</text>
			</view>
			<view class="from-item">
				<text style="width: 130upx;">证件号码</text>
				<input v-model="idcard" placeholder="与乘客证件号码一致" maxlength="18" placeholder-class="pcs"/>
			</view>
			<view class="from-item">
				<text style="width: 130upx;">手机号</text>
				<input v-model="phone" placeholder="请输入正确的手机号" maxlength="11" placeholder-class="pcs"/>
			</view>
		</view>
		<view class="bottom-view">
			<view @tap="savaPasseger()" class="bottom-btn">
				<text>提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../api';
	export default {
		data() {
			return {
				id:'',
				name: '',
				idcard: '',
				phone: '',
				type:'',
			}
		},
		
		onLoad(option) {
			// const id = JSON.parse(option.id);
			uni.setNavigationBarTitle({
			　　title: !option.id ? '添加乘车人' : '编辑乘车人'
			});
			
			if(option.id) {
				this.id = option.id;
				this.queryById(option.id);
			}
		},
		
		methods: {
			async queryById() {
				const {code, data} = await api.user.queryById({id: this.id});
				if(code === 200) {
					this.idcard = data?.idCard || "";
					this.name = data?.passengerName || "";
					this.phone = data?.phone || "";
					this.id = data?.id || "";
				}
			},
			
			async savaPasseger() {
				if(!this.name) {
					uni.showToast({
						title: '请输入姓名',
						duration: 1500,
						icon: "error",
					});
					return;
				}
								
				if(!this.sCardNo(this.idcard)) {
					uni.showToast({
						title: '身份证号错误',
						duration: 1500,
						icon: "error",
					});
					return;
				}
								
				if(this.phone.length !== 11) {
					uni.showToast({
						title: '手机号错误',
						duration: 1500,
						icon: "error",
					});
					return;
				}
				
				
				const params = {
					id: this.id,
					idCard: this.idcard,
					passengerName: this.name,
					phone: this.phone
				}
				
				let response = {};
				
				if(this.id) {
					response = await api.user.updatePassenger(params)
				} 
				else {
					response = await api.user.bindPassenger(params);
				}
				const { code, data } = response;
				if(code === 200) {
					uni.showToast({
						title: '添加成功',
						duration: 1500
					});
					const pages = getCurrentPages(); //页面栈
					const prePage = pages[pages.length - 2]; //上一页
					prePage.$vm.queryByUserId(); //触发上一页监听器
					uni.navigateBack();
				}
				else{
					uni.showToast({
						title: res.msg,
						duration: 1500,
						icon: "error",
					});
				}
			},
			
			sCardNo(card) {
			  // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X 
			  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
			  if(reg.test(card) === false) { 
			    return false; 
			  }
			  return true;
			},
		}
	}
</script>

<style lang="scss">
	.background {
		height: 100%;
		background: linear-gradient(to bottom, #2697FF 0%, #F7F7F7 30%);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.passenger-info {
			background: #ffffff;
			border-radius: 16upx;
			padding: 20upx;
			margin: 20upx;
			.from-item {
				display: flex;
				height: 80upx;
				flex-direction: row;
				align-items: center;
				border-bottom: solid 1upx #EFEFEF;
				.pcs {
					color: #C9CACC;
					font-size: 32rpx;
				}
				input {
					margin-left: 20upx;
				}
				text {
					color: #5E6166;
					font-size: 32rpx;
				}
			}
		}
		.bottom-view {
			height: 150upx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			background: #FFFFFF;
			.bottom-btn {
				width: 90%;
				margin-top: 10upx;
				height: 100upx;
				border-radius: 16upx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				background: #2697FF;
				color: #FFFFFF;
			}
		}
	}
</style>
